<template>
  <a-modal
    v-model:visible="state.visible"
    :title="state.title"
    width="900px"
    :after-close="closeLinkSetting"
    :mask-closable="false"
    :keyboard="false"
    @ok="submit"
  >
    <a-row :gutter="16">
      <a-col :span="8">
        <a-card title="选项值" :body-style="{ padding: 0 }">
          <a-list item-layout="horizontal" :data-source="options">
            <template #renderItem="{ item }">
              <a-list-item
                class="option-item"
                :class="{ active: currItem?.value === item.value }"
                @click="itemClick(item)"
              >
                {{ item.label }}
              </a-list-item>
            </template>
          </a-list>
          <!-- <div v-for="item in optionList" :key="item.value" class="option-item active">{{ item.label }}</div> -->
        </a-card>
      </a-col>
      <a-col :span="16">
        <a-card title="设置已选值的显示和隐藏">
          <!-- <a-table :row-selection="{ onChange: onSelectChange }" :columns="columns" :data-source="data" /> -->
          <a-row style="line-height: 40px">
            <a-col :span="10">
              <a-checkbox
                v-model:checked="state.checkAll"
                :indeterminate="state.indeterminate"
                @change="onCheckAllChange"
              >
                可联动字段
              </a-checkbox>
            </a-col>
            <a-col :span="14">
              <a-radio-group v-model:value="state.isShowAll">
                <a-radio :value="1">显示全部字段</a-radio>
                <a-radio :value="0">隐藏全部字段</a-radio>
              </a-radio-group>
            </a-col>
          </a-row>
          <a-row v-for="item in currItem.fieldList" :key="item.model" style="line-height: 40px">
            <a-col :span="10">
              <a-checkbox v-model:checked="item.check"> {{ item.label }} </a-checkbox>
            </a-col>
            <a-col :span="14">
              <a-radio-group v-model:value="item.visibleFlag" :disabled="!item.check">
                <a-radio :value="1">显示字段</a-radio>
                <a-radio :value="0">隐藏字段</a-radio>
              </a-radio-group>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
  </a-modal>
</template>
<script lang="ts" setup>
import { ref, PropType, reactive, watch, computed } from 'vue'
import { cloneDeep } from 'lodash-es'

const props = defineProps({
  fieldList: {
    type: Array as PropType<any[]>,
    default: () => []
  },
  optionList: {
    type: Array,
    default: () => []
  }
})

const options = computed(() => {
  const arr = props.optionList.map((item: any) => ({
    ...item,
    fieldList: cloneDeep(props.fieldList)
  }))
  if (linkContent.value) {
    for (const opt of arr) {
      if (!opt || !opt.value || !opt.fieldList) {
        continue
      }
      const tempLink = linkContent.value[opt.value]
      if (!tempLink) {
        continue
      }
      for (const field of opt.fieldList) {
        if (!field || !field.model) {
          continue
        }
        const key = field.model
        if (key in tempLink) {
          // 对象包含key，表示设置过
          field.check = true
          field.visibleFlag = tempLink[key]
        }
      }
    }
  }
  return arr
})

const emit = defineEmits(['setLink'])

const state = reactive({
  visible: false,
  title: '选项联动设置',
  indeterminate: true,
  checkAll: false,
  isShowAll: false,
  checkedList: ['Apple', 'Orange']
})
const currItem = ref()

watch(
  () => state.visible,
  (nVal) => {
    if (nVal) {
      currItem.value = options.value[0]
    }
  }
)

const linkContent = ref()

const show = (data) => {
  setLinkContentObj(data)
  state.visible = true
}

const setLinkContentObj = (data) => {
  if (!data) {
    return
  }
  const map = {}
  for (const temp of data) {
    if (!temp || !temp.linkedFields) {
      continue
    }
    const tempObj = {}
    for (const linkedField of temp.linkedFields) {
      if (!linkedField) {
        continue
      }
      tempObj[linkedField.linkFrontId] = linkedField.visibleFlag
    }
    if (Object.keys(tempObj).length > 0) {
      map[temp.optionVal] = tempObj
    }
  }
  if (Object.keys(map).length > 0) {
    linkContent.value = map
  }
}

const itemClick = (item) => {
  currItem.value = item
}

const submit = () => {
  const arr: any[] = []
  options.value.forEach((item) => {
    const checkArr = item.fieldList.filter((el) => el.check) // 只提交勾选的字段
    if (checkArr.length > 0) {
      arr.push({
        optionVal: item.value,
        linkedFields: checkArr.map((e) => ({
          linkFrontId: e.model,
          visibleFlag: e.visibleFlag
        }))
      })
    }
  })
  emit('setLink', arr)
  state.visible = false
}

const onCheckAllChange = (e) => {
  // 全选的功能还未完成
  Object.assign(state, {
    checkedList: e.target.checked ? [] : [],
    indeterminate: false
  })
}

const closeLinkSetting = () => {
  linkContent.value = null
}

defineExpose({
  show
})
</script>
<style lang="less">
.option-item {
  line-height: 40px;
  padding: 0 16px;
  cursor: pointer;
}
.active {
  background-color: #f3f8fd;
  color: #0177fd;
}
</style>
